<template>
  <div class="demo">
    <div class="demo-change">
      <span style="margin-right: 16px">Change locale of components:</span>
      <Radio.Group v-model:value="locale">
        <Radio.Button key="en" :value="enUS.locale">English</Radio.Button>
        <Radio.Button key="cn" :value="zhCN.locale">中文</Radio.Button>
      </Radio.Group>
    </div>
    <ConfigProvider :locale="locale === 'en' ? enUS : zhCN">
      <div class="demo-locale">
        <div class="example">
          <Pagination :total="50" show-size-changer />
        </div>
        <div class="example">
          <Select show-search style="width: 200px">
            <Select.Option value="jack">jack</Select.Option>
            <Select.Option value="lucy">lucy</Select.Option>
          </Select>
          <DatePicker />
          <TimePicker />
          <DatePicker.RangePicker style="width: 200px" />
        </div>
        <div class="example">
          <Button type="primary" @click="visible = true">Show Modal</Button>
          <Button @click="info">Show info</Button>
          <Button @click="confirm">Show confirm</Button>
          <Popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </Popconfirm>
        </div>
        <div class="example">
          <Transfer
            :data-source="[]"
            show-search
            :target-keys="[]"
            :render="(item) => item.title"
          />
        </div>
        <div class="demo-calendar">
          <Calendar :fullscreen="false" />
        </div>
        <div class="example">
          <Table :data-source="[]" :columns="columns" />
        </div>
        <Modal v-model:visible="visible" title="Locale Modal">
          <p>Locale Modal</p>
        </Modal>
      </div>
    </ConfigProvider>
  </div>
</template>
<script lang="ts" setup>
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  import { ref, watch } from 'vue';
  import Button from '@sscd/button';
  import Calendar from '@sscd/calendar';
  import { localeEnum } from '@sscd/common';
  import DatePicker from '@sscd/date-picker';
  import Modal from '@sscd/modal';
  import Pagination from '@sscd/pagination';
  import Popconfirm from '@sscd/popconfirm';
  import Radio from '@sscd/radio';
  import Select from '@sscd/select';
  import Table from '@sscd/table';
  import TimePicker from '@sscd/time-picker';
  import Transfer from '@sscd/transfer';
  import ConfigProvider from '@sscd/config-provider';
  dayjs.locale('en');
  const { enUS, zhCN } = localeEnum;
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      filters: [{ text: 'filter1', value: 'filter1' }],
    },
    { title: 'Age', dataIndex: 'age' },
  ];
  const visible = ref(false);
  const locale = ref(enUS.locale);
  watch(locale, (val) => {
    dayjs.locale(val);
  });
  const info = () => {
    Modal.info({ title: 'some info', content: 'some info' });
  };
  const confirm = () => {
    Modal.confirm({ title: 'some info', content: 'some info' });
  };
</script>
<style lang="less" scoped>
  .demo {
    .demo-change {
      margin-bottom: 16px;
    }
    .demo-locale {
      border-top: 1px solid #d9d9d9;
      padding-top: 16px;
      .example {
        margin: 16px 0;
        > * {
          margin-right: 8px;
        }
      }
    }
    .demo-calendar {
      width: 319px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
    }
  }
</style>